<!DOCTYPE html>


<html class="site-demo-overflow">

<head>
    <meta charset="utf-8">
    <title>才源软件科技通用开发平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../public/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../../public/css/public.css" media="all" />
</head>


    <form class="layui-form detail minor news">
        <div class="layui-col-lg4 layui-col-sm6">
            <div class="layui-form-item">
                <label class="layui-form-label" >标题</label>
                <div class="layui-input-block">
                    <div name="newsTitle" style="font-size: 18px;color: #1AA094 ;" id="newsTitle" autocomplete="off">CSS3 transition实现超酷动画效果</div>
                </div>
            </div>
        </div>

        <div class="layui-col-lg4 layui-col-sm6">
            <div class="layui-form-item">
                <label class="layui-form-label" >附加信息</label>
                <div class="layui-input-block">
                    <div name="author" id="author" style="text-align: center;font-size: 12px; color: #B3B3B3;" autocomplete="off">2018-09-20 by UIBaby</div>
                </div>
            </div>
        </div>


        <div class="layui-col-md12">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block" id="newsContent">

<p><strong>一、前面的感慨</strong><br>以前也陆陆续续试过CSS3的一些特性，文字投影，多边框等。但都是试试而已，知道有这么回事。今天，见到了一个新玩意，transition，认认真真的试了一下，经过，我懵了，我呆了，我傻了，半天说不出话来，这…这…unbelievable，amazing，太神奇了，太不可思议了，几行简单的CSS，如此炫酷的动画效果，flash都不及的动画效果，我真是难以表达我的心情。<br><br>下面由浅入深，使用纯CSS，一步一步实现图片墙动画效果。这里，必须要先说明一下：对于对于此transition效果，IE6,IE7,IE8浏览器可以回家过元旦节了，这里没有它们的事情，Firefox3虽然平时表现不错，这里也没有它的事情。这个效果最拿手的是chrome2浏览器，Safari4，也就是webkit家族，这里Firefox3.5勉强凑合，有盒阴影和旋转效果，但是没有动画。所以，下文陆续提供的demo页面仅适用于chrome浏览器和Safari浏览器，部分适用于Firefox3.5+，IE纯粹的观众。</p>
<p><strong>二、基础练习 – 实现旋转与盒投影效果</strong><br>在CSS3中，实现旋转效果需要用到transform属性中的rotate属性；实现盒阴影效果需要使用box-shadow属性。具体参见下面的示例代码。</p>
<div><pre>-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
-webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
    rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
</pre></div>
<p>上面代码部分，首先应该知道的是webkit表示webkit核心的浏览器，是其私有属性，作用于chrome和Safari浏览器，moz是Firefox浏览器的私有属性。<br><code>transform</code>中文意思转换，含有多个属性值，其中<code>rotate</code>表示旋转，其他一些属性如<code>scale</code>-尺寸放大缩小（本文将会用到），<code>skew</code>表示倾斜角度，<code>translate</code>表移动距离。例如，本例中，rotate(10deg)表示顺时针旋转10度，如果要逆时针旋转，使用负值就可以了。<br>box-shadow表示盒阴影，其有四个参数，第一个参数表示水平偏移，例如2px表示投影右偏移2像素，第二个参数表示垂直偏移，2px表示投影向下偏移2像素，第三个参数表示模糊的大小，第四个参数为rgba颜色值，例如 rgba(135, 139, 144, 0.4)，括号内四个值分别指代r(red),g(green),b(blue),a(opacity)，这里表示透明度为40%的一种灰色。</p>
<p>上面代码在Safari浏览器下的表现如下：<br><img alt="" src="http://image71.360doc.com/DownloadImg/2014/03/1323/39875385_1.jpg" width="336" height="166"></p>
<p>如果您当前浏览器为Safari3.5+，或是chrome，Safari，您可以狠狠地点击这里：<a href="http://www.zhangxinxu.com/study/200912/CSS3-transform-example1.html" target="_blank">基础旋转投影效果demo</a></p>
<p><strong>三、使用transition给单个图片添加悬停动画</strong><br>有别于上面基础效果CSS代码，这里需要添加一个transition的样式，告诉浏览器，这里要有动画效果。先看一下此相关的CSS代码：</p>
<div><pre>.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center;
    background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
        rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
    <b>-webkit-transition:all 0.5s ease-in;</b>
}
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); 
        transform:rotate(0deg);
}
</pre></div>
<p>代码部分最关键的就是：-webkit-transition:all 0.5s ease-in;目前而言，transition仅webkit核心的浏览器支持，所以此效果仅在chrome或是Safari下有。<br>transiton属性有这几个值：<br>transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是只指定backgound参与这个过渡<br>transition-duration:*//指定这个过渡的持续时间<br>transition-delay:* //延迟过渡时间<br>transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier</p>
<p>熟悉flash显示与动画编程的应该知道，这里的过渡类型的含义与flash中缓动类型（远不及flash丰富）是一致的：<br>linear <span style="COLOR: #999999">//线性过度</span><br>ease-in <span style="COLOR: #999999">//由慢到快</span><br>ease-out <span style="COLOR: #999999">//由快到慢</span><br>ease-in-out <span style="COLOR: #999999">//由慢到快在到慢</span></p>
<p><span style="COLOR: #999999">额外的些知识：timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。参见这里http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag。<br>transition还支持CSS伪类。</span></p>
<p>所以，<code>-webkit-transition:all 0.5s ease-in</code>表示的意思就是所有的属性都执行过渡效果，像角度啊，投影大小，边框色或是下面要讲到的比例啦等，执行时间为0.5秒，过渡动画类型为先慢后快。</p>
<p>如果您当前浏览器为Safari3.5+，或是chrome，Safari，您可以狠狠地点击这里：<a href="http://www.zhangxinxu.com/study/200912/CSS3-transform-example2.html" target="_blank">单张图片的鼠标悬停旋转动画demo</a></p>
<p><strong>四、多张美女图的transition旋转效果</strong><br>上面讲的是一张图片的鼠标悬停旋转效果，现在我们在页面上放它个十几张图片，层叠排列，岂不是很酷。见下图：<br><img alt="" src="http://image71.360doc.com/DownloadImg/2014/03/1323/39875385_2.jpg" width="452" height="167"></p>
<p>核心的CSS代码与上面的一致，多的就是种图片的绝对定位布局了。这里不多说。</p>
<p>如果您当前浏览器为Safari3.5+，或是chrome，Safari，您可以狠狠地点击这里：<a href="http://www.zhangxinxu.com/study/200912/CSS3-transform-example3.html" target="_blank">多张图片的鼠标悬停旋转动画demo</a></p>
<p><strong>五、单张图片的旋转拉近动画效果</strong><br>这里对动画效果做了进一步的升级，更酷了。描述为：鼠标经过图片，图片不仅旋转，而且图片的投影拉长，图片比例变大，于是形成了图片从墙面上浮起来的炫酷效果。</p>
<p>如果您当前浏览器为Safari3.5+，或是chrome，Safari，您可以狠狠地点击这里：<a href="http://www.zhangxinxu.com/study/200912/CSS3-transform-example4.html" target="_blank">单张图片的旋转悬浮效果demo</a></p>
<p>核心的CSS代码如下：</p>
<div><pre>.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center; 
        background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
        rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
    -webkit-transition:all 0.5s ease-in;
}
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a;
    -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -moz-box-shadow:15px 15px 20px 
        rgba(50, 50, 50, 0.4); box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
    -webkit-transform:rotate(0deg) scale(1.05); -moz-transform:rotate(0deg) scale(1.05); 
            transform:rotate(0deg) scale(1.05);
}
</pre></div>
<p>对比三和五部分的CSS代码，您会发现，这里的CSS的hover部分发生了些变化，首先增加的盒阴影样式，<code>box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);</code>加大了投影的偏移，以及模糊的大小，同时投影的颜色也加深了。另外就是<code>transform:rotate(0deg) scale(1.05);</code>增加了scale属性，scale(1.05)表示1.05倍于原来的尺寸显示。而这些变化在webkit核心的浏览器下都是动画显示的，于是就有了图片的拉伸悬浮效果。<br><img alt="" src="http://image71.360doc.com/DownloadImg/2014/03/1323/39875385_3.jpg" width="359" height="144"></p>
<p><strong>六、最后的图片墙悬浮超酷动画</strong><br>现在讲单个图片的悬浮效果应用到15个美女图片上，就有了本文最终的美女图片墙的图片旋转悬浮动画效果了。<br>如果您当前浏览器为Safari3.5+，或是chrome，Safari，您可以狠狠地点击这里：<a href="http://www.zhangxinxu.com/study/200912/CSS3-transform-example5.html" target="_blank">图片墙旋转悬浮效果demo</a><br>每张美女图片所在的a标签采用绝对定位，鼠标经过改变z-index层级使其顶层显示。有了CSS3，实现效果就是这么简单。<br><img alt="" src="http://image71.360doc.com/DownloadImg/2014/03/1323/39875385_4.jpg" width="437" height="148"></p>
<p><strong>七、最后自己的一些总结</strong><br>我是很兴奋啊，不过写到这里，我的肾上腺素貌似又回到了正常水平，虽说CSS3的一些特性真是非常的好，但是，并不是很完美的说。首先，浏览器的支持，要是所有的浏览器都支持transition，那才真正的普天同庆，但不知还要等多久。即使chrome浏览器支持transform的旋转，但是，您可能注意到了，旋转图片的锯齿很明显，文字也是扭曲（Firefox下尤为明显）了。</p>
<p>关于transition，如果您有兴趣，可以去w3c去看一看，里面有相对比较详细的介绍：http://www.w3.org/TR/css3-transitions/</p>
<p>总之，CSS3中蕴含的潜力无限，等着您我挖掘探寻了……</p>

                </div>
            </div>
        </div>
    </form>

    <script src="../../../public/js/jquery.min.js"></script>
    <script src="../../../public/layui/layui.js" charset="utf-8"></script>
    <script src="form.js"></script>
</body>

</html>